@(customer: Option[Customer], scripts: Html = Html(""))(content: Html)

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Energy Saving Roadmap</title>
        <link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("css/bootstrap.css"))' >
        <link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("bootstrap-editable.css"))' >
        <link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("font-awesome.css"))' >
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.ico")">
        <!-- jQuery is used in js code in middle of some pages so we need to include in beginning here as opposed to end of pafe -->
        <script type='text/javascript' src="@routes.WebJarAssets.at(WebJarAssets.locate("jquery.min.js"))"></script>
        <script type='text/javascript' src="@routes.WebJarAssets.at(WebJarAssets.locate("dust-core.js"))"></script>
        <script type="text/javascript" src="@routes.Application.javascriptRoutes"></script>
    </head>
	<body>    
	

		<div class="container">

	    	<!-- Static navbar -->
	    <div class="navbar navbar-default" role="navigation">
	        <div class="container-fluid">
	          <div class="navbar-header">
	            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	              <span class="sr-only">Toggle navigation</span>
	              <span class="icon-bar"></span>
	              <span class="icon-bar"></span>
	              <span class="icon-bar"></span>
	            </button>
	            <ul class="nav navbar-nav navbar-right">
                <li>
                  <a class="navbar-brand" href="@routes.Application.index">
                    <span class="logo"></span>
                  </a>
                </li>
                <li>
                  <a class="navbar-brand title" href="@routes.Application.index">
                    Energy Saving Roadmap
                  </a>
                </li>
              </ul>
	          </div>
	          <div class="navbar-collapse collapse">
	            <ul class="nav navbar-nav navbar-right">
	              <li><a href="@routes.Roadmaps.index(customer.map{_.id}.getOrElse(None))">Roadmap</a></li>
	              <li><a href="@routes.Customers.list(customer.map{_.id}.getOrElse(None))">Select Customer</a></li>
                <li><a href="@routes.Reset.index">Reset</a></li>
                <li><a href="@routes.About.index()">About</a></li>
	            </ul>
	          </div>
	        </div>
	    </div>

      @content
	    
	  </div> <!-- /container -->

		<div id="footer">
      <div class="container">
        <p class="text-muted">This application was created by <a id="developer-lnk" href="@routes.About.index("profile")">Ross Mahony</a> for the <a href="http://www.npower.com/the-developer-challenge" target="_blank">npower Developer Challenge 2014</a></p>
      </div>
    </div>

	  <!-- Le javascript
	  ================================================== -->
	  <!-- Placed at the end of the document so the pages load faster -->
	  <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("js/bootstrap.js"))'></script>
	  <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("bootstrap-editable.js"))'></script>
	  <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("highcharts.js"))'></script>
    
	  @scripts

	</body>
</html>
